<template>
  <el-card class="order-item">
    <el-row>
      <el-col :span="2">
        <div class="shop-img" @click="$router.push('/shop/1001')">
          <el-avatar
            src="https://blb.ismy.wang/imgs/shop_logos/huangmenji.jpg"
            fit="cover"
            shape="square"
            :size="64"
          ></el-avatar>
        </div>
      </el-col>
      <el-col :span="22">
        <span class="order-status">{{ getOrderStatus(order) }}</span>
        <h4 class="shop-name" @click="$router.push('/shop/' + order.sellId)">
          {{ order.shop.sellName }}<span class="el-icon-arrow-right"></span>
        </h4>
        <p class="order-date">{{ order.createTime }}</p>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="18" class="order-detail">
            <ul class="order-img-list">
              <li
                v-for="item in order.orderItems"
                :key="item.productId"
                class="order-img-item"
              >
                <el-image
                  fit="cover"
                  :src="item.foodUrl"
                  :preview-src-list="[item.foodUrl]"
                />
              </li>
            </ul>
          </el-col>
          <el-col :span="6">
            <p class="order-price">￥{{ order.orderPrice }}</p>
            <p class="order-name">
              <span v-for="item in order.orderItems" :key="item.detailId"
                >{{ item.foodName }}&nbsp;</span
              >
            </p>
          </el-col>
        </el-row>
        <div
          v-if="getOrderStatus(order) === '配送中' && editable"
          class="amap-box-wrapper"
        >
          <el-amap class="amap-box" :zoom="10" :center="[117.5, 24]">
            <el-amap-marker
              vid="component-shop-marker"
              :position="[117.5, 24]"
            ></el-amap-marker>
            <el-amap-text
              vid="component-shop-text"
              :position="[117.5, 24]"
              :text="'店铺位置'"
            ></el-amap-text>
          </el-amap>
        </div>
        <!-- getOrderStatus(order) === '已完结' && !this.$store.state.addEvalShow&& &&getPayStatus(order)==='已支付'-->
        <el-button
          v-if="editable&&getOrderStatus(order) === '已完结'"
          @click="showOrderEval(order.orderId)"
          size="mini"
          type="warning"
          style="float: right; margin-top: 5px; margin-left: 15px">评价订单</el-button
        >
        <el-button
          v-if="editable"
          size="mini"
          type="primary"
          style="float: right; margin-top: 5px; margin-left: 15px"
          @click="$router.push('/shop/' + order.shop.sellId)"
          >再来一单</el-button
        >
        <el-button
          v-if="editable"
          size="mini"
          type="success"
          style="float: right; margin-top: 5px"
          @click="showOrderDetail(order.orderId)"
          >订单详情</el-button
        >
      </el-col>
    </el-row>
    <order-eval v-if="editable" />
  </el-card>
</template>

<script>
import orderService from "../../service/OrderService";
import payService from "../../service/PayService"
import OrderEval from "./OrderEval";
export default {
  props: {
    order: {
      type: Object,
      required: true,
    },
    editable: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      foodList: [],
      isCloseEval: this.$store.state.addEvalShow
    };
  },
  methods: {
    getPayStatus(order){
      return payService.getPayStatus(order.payStatus)
    }
    ,
    getOrderStatus(order) {
      return orderService.getOrderStatus(order);
    },
    showOrderDetail(orderId) {
      this.$emit("show-order-detail", orderId);
    },
    showOrderEval(orderId) {
      var data = orderService.getOrderDetail(orderId);
      this.foodList=[]
      data.then((d) => {
        d.orderItems.forEach((element) => {
          this.foodList.push(element.foodName);
        });
      });
       
      this.$store.commit("toogleEvalPaneShow", this.foodList);
      
    },
  },
  components: {
    OrderEval,
  },
};
</script>

<style lang="less" scoped>
.order-item {
  margin-bottom: 20px;
  .shop-name {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    font-size: 14px;
    cursor: pointer;
  }
  .el-avatar {
    cursor: pointer;
  }
  .order-date {
    font-size: 12px;
    color: #666;
  }
  .order-price {
    color: #f60;
    font-size: 20px;
    padding: 0;
    margin: 0;
    text-align: right;
  }
  .order-name {
    text-align: right;
    margin-top: 32px;
    margin-bottom: 0;
    color: #666;
  }
  .order-status {
    font-size: 14px;
    float: right;
  }
}
.order-img-list {
  margin: 0;
}
.order-img-item {
  display: inline-block;
  padding: 0 5px;
  .el-image {
    height: 100px;
    width: 144px;
    border-radius: 5px;
  }
}
.amap-box {
  width: 100%;
  height: 400px;
  border: 2px solid #409eff;
  box-sizing: border-box;
}
</style>
